<template>
  <div class="site-container">
    <header class="header">
      <img
        @click="goBack"
        class="back-arrow"
        src="@/assets/images/back_arrow.png"
        alt=""
      />
      <span class="title">{{ name }}</span>
    </header>
    <div class="site-content">
      <iframe
        :src="url"
        frameborder="0"
      ></iframe>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const goBack = () => {
  router.go(-1);
};

const url = ref('');
const name = ref('');
url.value = route.query.url;
name.value = route.query.name;

onMounted(() => {});
</script>

<style scoped lang="scss">
.site-container {
  position: relative;
  height: 100vh;
  background: linear-gradient(180deg, #e8f9ff 0%, #f4f6f8 100%);
  .header {
    display: flex;
    align-items: center;
    padding: 20px 60px;
    position: relative;
    .title {
      font-weight: 400;
      font-size: 28px;
      color: #333333;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .back-arrow {
      width: 48px;
      height: 48px;
    }
  }
  .site-content {
    height: calc(100vh - 92px);
    iframe {
      width: 100%;
      height: 100%;
      overflow-x: hidden;
    }
  }
  .loading {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
